<template>
  <v-data-table :headers="headers" :items="desserts" sort-by="calories" class="elevation-1">
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>核算产品科目映射</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="800px">
          <template v-slot:activator="{ on }">
            <v-btn color="primary" dark class="mb-2" v-on="on">新增核算产品科目映射</v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
              
                  <v-col cols="12" sm="6" md="4">
                     <v-select 
                     :items="productCodeItems" 
                     label="核算产品码" 
                     v-model="editedItem.productCode"
                      item-text="prdruleName"
                      item-value="prdruleCode"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="12" md="12">
                     <v-select 
                     :items="proAttItems" 
                     label="核算产品属性编号" 
                     v-model="editedItem.elementCode"
                      item-text="name"
                      item-value="attributes"
                      multiple
                      persistent-hint
                      chips
                     ></v-select>
    
                  </v-col>
                   <v-col cols="12" sm="6" md="4">
                      <v-select 
                     :items="elementItems" 
                     label="记账要素名称" 
                     v-model="editedItem.bookElementName"
                      item-text="name"
                      item-value="attributes"
                     ></v-select>
                  </v-col>
                   <!-- <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.bookElementTag" label="记账要素标识"></v-text-field>
                  </v-col> -->
                 
                   <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.ProductDesc" label="配置描述"></v-text-field>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.serial" label="序号"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="12" md="12">
                    <v-autocomplete
                      v-model="editedItem.busnoa"
                      :items="busnoaItems"
                      chips
                      clearable
                      hide-details
                      hide-selected
                      item-text="glSubjectInfo"
                      item-value="businessCode"
                      label="请选择业务代号"
                      solo
                    ></v-autocomplete>
                   
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close">取消</v-btn>
              <v-btn color="blue darken-1" text @click="save">保存</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>

     <template v-slot:item.bookElementTag="{ item }">
       {{item.bookElementName}}
    </template>
     <template v-slot:item.bookElementName="{ item }">
      <span v-for="s in elementItems" v-if="item.bookElementName==s.attributes">{{s.name}}</span>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
      <v-icon small @click="deleteItem(item)">mdi-delete</v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data: () => ({
    busnoaItems:[],
    elementItems:[],
    proAttItems:[],
    productCodeItems:[],
    dialog: false,
    headers: [
      {
        text: "核算产品码",
        align: "start",
        value: "productCode"
      },
      { text: "核算产品属性编号", value: "elementCode" },
       { text: "记账要素标识", value: "bookElementTag" },
      { text: "记账要素名称", value: "bookElementName" },
       { text: "配置描述", value: "productDesc" },
      { text: "序号", value: "serial" },
      {text: "业务代号", value: "busnoa" },
      { text: "操作", value: "actions", sortable: false }
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      productCode: "",
      elementCode: "",
      bookElementTag:"",
      bookElementName: "",
       ProductDesc: "",
        serial: "",
         busnoa: "",
    
    },
    defaultItem: {
       productCode: "",
      elementCode: "",
      bookElementTag:"",
      bookElementName: "",
       ProductDesc: "",
        serial: "",
         busnoa: "",
    }
  }),

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "新增" : "修改";
    }
  },

  watch: {
    dialog(val) {
      val || this.close();
    }
  },

  created() {
    this.initialize();
    this.getDict();
  },

  methods: {
    initialize() {
     this.axios
        .get("/productSubject/list")
        .then(response => {
          this.desserts = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
    },

    getDict(){
       this.axios
        .get("/dict/topName/币种")
        .then(response => {
           response.data.data.forEach(element => {
            this.proAttItems.push(element)
          });
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/dict/topName/存期")
        .then(response => {
          response.data.data.forEach(element => {
            this.proAttItems.push(element)
          });
          
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/dict/topName/金额解析要素")
        .then(response => {
          this.elementItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
          this.axios
        .get("/prdrule/listDistinct")
        .then(response => {
          this.productCodeItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });

         this.axios
        .get("/subject/list")
        .then(response => {
          this.busnoaItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
        
        
    },

    editItem(item) {
      console.log(item)
      item.elementCode=''
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      const index = this.desserts.indexOf(item);
      confirm("确定要删除此条记录吗?") &&
        this.axios.delete('/productSubject/'+item.id)
          .then(res=>{
            this.desserts.splice(index, 1);
          })
        
    },

    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    save() {
      console.log(this.editedItem)
      var arr =  this.editedItem.elementCode
      if(arr.length>0){
        var str = '';
        for(var i=0;i<arr.length;i++){
          if(i<arr.length-1) arr[i]=arr[i]+'_'
          str = str + arr[i]
        }
        this.editedItem.elementCode=str;
      }
       console.log(this.editedItem)
       this.axios.post("/productSubject", this.$qs.stringify(this.editedItem)).then(res => {
          this.initialize();
          this.close();
      });
      // if (this.editedIndex > -1) {
      //   //Object.assign(this.desserts[this.editedIndex], this.editedItem);
      //   this.axios.post("/rules", this.editedItem).then(res => {
      //     this.initialize()
      // });
      // } else {
      //   this.desserts.push(this.editedItem);
      // }
      
    }
  }
};
</script>